import React, { Fragment } from 'react';
import { Row, Col, Form, Table } from 'antd';
import { get as getPath } from 'object-path';
import { QuickForm } from 'vv-frontend-components';
import { formatMessage } from 'umi';
import { connect } from 'umi';
import LinkTo from '@/components/LinkTo';
import { dateConversion2 } from '@/utils/utils';
import { Pagination } from '@/components';
import style from './reportRank.less';

class Overtime extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            typeCode: '',
            sorters: ''
        };
    }

    componentDidMount() {
        this.fetchList();
    }

    handleSubmit = async e => {
        const {
            dispatch,
            reportRank: { paginationOvertime }
        } = this.props;
        e.preventDefault();
        await dispatch({
            type: 'reportRank/save',
            payload: {
                paginationOvertime: {
                    ...paginationOvertime,
                    current: 1
                }
            }
        });
        this.fetchList();
    };

    // 获取列表
    fetchList = () => {
        const { form, reportRank, dispatch } = this.props;
        const { paginationOvertime } = reportRank;
        const {
            companyDepart,
            date = { range: [] }
            // userName
        } = form.getFieldsValue();

        dispatch({
            type: 'reportRank/fetchOverRank',
            payload: {
                companyCode: companyDepart?.companyId || '',
                departmentCode: companyDepart?.departmentId || '',
                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                pageNo: paginationOvertime.current,
                pageSize: paginationOvertime.pageSize,
                isLookMore: '2',
                typeCode: getPath(this.state, 'typeCode', '')
            }
        });
    };

    // 表格表头点击切换排序
    changeTable = async (pagination, filters, sorter) => {
        const { sorters } = this.state;
        // let orderBy;
        let sorterField;
        if (sorter && sorter.field && sorter.order) {
            if (sorter.field === 'workTimeOver') {
                sorterField = '5';
            }
            if (sorter.field === 'restTimeOver') {
                sorterField = '6';
            }
            if (sorter.field === 'holidayTimeOver') {
                sorterField = '7';
            }
            if (sorter.field === 'allOverTime') {
                sorterField = '';
            }
            this.setState({
                typeCode: sorterField
            });
        } else {
            this.setState({
                typeCode: ''
            });
        }
        const {
            dispatch,
            reportRank: { paginationOvertime: curPagination }
        } = this.props;
        await dispatch({
            type: 'reportRank/save',
            payload: {
                paginationOvertime: {
                    ...curPagination,
                    ...pagination
                }
            }
        });
        if (sorter && sorters !== sorter) {
            this.setState({
                sorters: sorter
            });
            await dispatch({
                type: 'reportRank/save',
                payload: {
                    paginationOvertime: {
                        current: 1,
                        pageSize: curPagination.pageSize
                    }
                }
            });
        }
        this.fetchList();
    };

    render() {
        const { loading, reportRank, form } = this.props;
        const { overtimeData, paginationOvertime } = reportRank;
        // const { locale } = new Locale('stat.report');
        const columnsOvertime = [
            {
                dataIndex: 'id',
                key: 'id',
                render: (text, record, index) => (
                    <p
                        className={
                            index + paginationOvertime.pageSize * (paginationOvertime.current - 1) < 5
                                ? style.wnP
                                : style.wnOther
                        }
                    >
                        {index + paginationOvertime.pageSize * (paginationOvertime.current - 1) + 1}
                    </p>
                )
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.userName'
                })}`,
                dataIndex: 'userName',
                key: 'userName',
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/overrecord"
                            query={{
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: date?.type,
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.userName}
                        </LinkTo>
                    );
                }
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.departName'
                })}`,
                dataIndex: 'departName',
                key: 'departName',
                width: 150
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.position'
                })}`,
                dataIndex: 'position',
                key: 'position',
                width: 200
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.allOver'
                })}`,
                dataIndex: 'allOverTime',
                key: 'allOverTime',
                width: 100,
                render: (text, record) => <span>{dateConversion2(record.allOverTime)}</span>,
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.workTimeOver'
                })}`,
                dataIndex: 'workTimeOver',
                key: 'workTimeOver',
                width: 150,
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/overrecord"
                            query={{
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                overSign: 1,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {dateConversion2(record.workTimeOver)}
                        </LinkTo>
                    );
                },
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.restTimeOver'
                })}`,
                dataIndex: 'restTimeOver',
                key: 'restTimeOver',
                width: 150,
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/overrecord"
                            query={{
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                overSign: 2,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {dateConversion2(record.restTimeOver)}
                        </LinkTo>
                    );
                },
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.holidayTimeOver'
                })}`,
                dataIndex: 'holidayTimeOver',
                key: 'holidayTimeOver',
                width: 150,
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/overrecord"
                            query={{
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                overSign: 3,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {dateConversion2(record.holidayTimeOver)}
                        </LinkTo>
                    );
                },
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.absence.action'
                })}`,
                dataIndex: 'action',
                key: 'action',
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/overrecord"
                            query={{
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {formatMessage({
                                id: 'stat.report.toOverDetail'
                            })}
                        </LinkTo>
                    );
                }
            }
        ];

        return (
            <Fragment>
                {/* 加班人员排行 */}
                <Row type="flex" className="searchTitle">
                    <Col>
                        <Form layout="inline" onSubmit={this.handleSubmit}>
                            <QuickForm form={form} config={getPath(this.props, 'config')} />
                        </Form>
                    </Col>
                </Row>
                <Table
                    style={{ marginTop: '12px' }}
                    dataSource={overtimeData}
                    columns={columnsOvertime}
                    loading={loading}
                    rowKey="id"
                    className={style.wn_noAsc}
                    onChange={this.changeTable}
                    pagination={false}
                />
                <Pagination onChange={this.changeTable} {...paginationOvertime} loading={loading} />
            </Fragment>
        );
    }
}
export default connect(({ reportRank, loading }) => ({
    reportRank,
    loading: loading.models.reportRank
}))(Form.create()(Overtime));
